/**
 * Created by 1 on 2016/11/14.
 */

var aqiDate = [];

/**
 * 循环清除子元素
 * @param element
 */
// function removeAllChild(element) {
// 	while (element.hasChildNodes()){
// 		element.removeChild(element.firstChild)
// 	}
// }

/**
 * 检测用户输入数据，合格后获取数据并且添加到数组中
 */
var cityName = document.getElementById("aqi-city-input");
var airValue = document.getElementById("aqi-value-input");
function getAqiData() {
	// body...
	var city = cityName.value.trim();//获得其值并且去除前后的空格
	var aqi = airValue.value.trim();
	if(!city.match(/^[A-Za-z\u4e00-\u9fa5]+$/)){
		alert("城市名必须为中英文字符，请重新输入");
		return;
	}
	if (!aqi.match(/^-?[1-9]\d*$/)){
		alert("必须为整数！");
		return;
	}
	aqiDate.push([city,aqi]);
}
/**
 * 渲染表格
 * @return {[type]} [description]
 */
function renderAqiList() {
	// body...
	// var headTr = document.createElement('tr');
	// var cityTd = document.createElement('td');
	// var apiTd = document.createElement('td');
	// var caozuo = document.createElement('td');
    //
	// removeAllChild(document.getElementById("aqi-table"));
    //
	// cityTd.innerHTML = "城市";
	// apiTd.innerHTML = "空气质量";
	// caozuo.innerHTML = "操作";
    //
	// headTr.appendChild(cityTd);
	// headTr.appendChild(apiTd);
	// headTr.appendChild(caozuo);
	// document.getElementById("aqi-table").appendChild(headTr);
	var items = "<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";

	for (var i = 0;i <aqiDate.length;i++){//根据数组中数据的长度来渲染表格
		// var tableTr = document.createElement('tr');
		// var tableCity = document.createElement('td');
		// var tableApi = document.createElement('td');
		// var tableCao = document.createElement('td');
		// var deleteButton = document.createElement('button');
		// var sortButton = document.createElement("button");
        //
		// tableCity.innerHTML = aqiDate[i][0];
		// tableApi.innerHTML = aqiDate[i][1];
		// // deleteButton.innerHTML = "删除";
		// sortButton.innerHTML = "排序";
        //
		// tableTr.appendChild(tableCity);
		// tableTr.appendChild(tableApi);
		// tableCao.appendChild(deleteButton);
		// // tableCao.appendChild(sortButton);
		// tableTr.appendChild(tableCao);
		// document.getElementById("aqi-table").appendChild(tableTr);
		items +="<tr><td>"+aqiDate[i][0]+"</td><td>"+aqiDate[i][1]+"</td><td><button>删除</button></td></tr>";

	}
	document.getElementsByTagName("table")[0].innerHTML = items;
}
/**
 *获取用户数据，更新数据，并进行页面的更新
 * @param {[type]} argument [description]
 */
function addBtnHandle() {
	// body...
	getAqiData();
	renderAqiList();
}
/**
 * 删除按钮处理函数
 * @param e
 */
function delBtnHandle(e) {
	var city = e.parentElement.parentElement.firstChild;
	var j = 0;
	for(var i=0;i<aqiDate.length;i++){
		if(aqiDate[i][0] == city.innerHTML){//获取点击位置的城市名称并判断
			j = i;
			break;
		}
	}
	aqiDate.splice(j,1);//删除数据
	renderAqiList();//更新表格
}
/**
 * 排序处理函数
 */
function sortAqiList() {
	aqiDate.sort(function (d1, d2) {
		return d2[1] - d1[1];
	});
}
/**
 * 排序按钮处理函数
 */
function sortButtonHandle() {
	sortAqiList();
	renderAqiList();
}
/**
 * 初始化函数
 */
function init() {
	// 按钮点击事件
	document.getElementById("add-btn").onclick = addBtnHandle;
	document.getElementById("aqi-table").addEventListener("click", function (e) {
		if (e.target && e.target.nodeName === "BUTTON") {
			delBtnHandle(e.target);
		}

	})//不能加分号，否则有错误
	document.getElementById("sort-button").onclick = sortButtonHandle;
}

init();//调用函数


